import  './style.scss'
import GoodsLists from "./GoodsLists"
import Pagination from "@ui/RJMart/pagination";
import usePartState from "@module/usePartState";
import image0902 from "@root/P/images/ad/img0904.png"
import ToastUtils from "@root/pages/ruijing/common/utils/ToastUtils"

export default function AdActivity() {
    const [stateObj, updateState] = usePartState({
        pageNo:1,
        lists:[],
        categoryId:"1",
        total:0,
        totalPage:0,
        choosed:0,
    });

    const pageRef=React.useRef(null);
    const itemlists=[
        '实验耗材',    //1
        '化学试剂',    //51
        '生物试剂',    //518
        '其他品类'    //0
    ];

    if(!global.hasLogin){
        $state.go({
            stateName: "/Login",
        })
    }

    const {lists,pageNo,categoryId,total,choosed}=stateObj;


    React.useEffect(()=>{
        getActiveProductInfoList();
    },[categoryId,pageNo])



    function getActiveProductInfoList() {
        let url=`/store/api/active/product/getActiveProductInfoList`;
        let params={
            categoryId:categoryId,
            pageNo:pageNo,
            pageSize:20
        }
        // ZenUI.SL(30);
        ToastUtils.loading()
        REST.post(url,params)
            .then(res=>{
                // ZenUI.HL();
                ToastUtils.hide();
                // console.log(res);
                if(res.code=='200'){
                    updateState({
                        lists:res.data&&res.data.data,
                        total:res.data&&res.data.total,
                        totalPage:res.data&&res.data.totalPage
                    })
                }
                if(res.code=='500'){
                    ZenUI.ST(res.msg);
                }
            })
            .catch(err=>{
                ToastUtils.hide();
                console.log(err)

            })
    }


    //点击分类
    function onClick(index) {
        if(index==0){
            updateState({
                categoryId:"1",
                pageNo:1,
                choosed:0,
            })
        }
        else if(index==1){
            updateState({
                categoryId:"51",
                pageNo:1,
                choosed:1,
            })
        }
        else if(index==2){
            updateState({
                categoryId:"518",
                pageNo:1,
                choosed:2,
            })
        }
        else if(index==3){
            updateState({
                categoryId:"0",
                pageNo:1,
                choosed:3,
            })
        }
    }


    //统计接口
    function countClick(id) {
        let url=`/store/api/active/product/countClick`;
        let params={
            id:id
        }

        REST.post(url,params)
            .then(res=>{
                console.log(res);

            })
            .catch(err=>{
                console.log(err)
            })
    }



    return(
        <div className="rj-ad-active-wrapper">
            <div className="rj-ad-active">
                <div className=" active-banner">
                    <img src={image0902} alt=""/>
                    {/*<p>大型活动banner图</p>*/}
                </div>
                <div className="product-classfy">
                    {
                        itemlists.map((item,index)=>{
                            return(
                                <TabItem
                                    item={item}
                                    index={index}
                                    key={index}
                                />
                            )
                        })
                    }
                </div>
                {
                    lists&&lists.map((item,index)=>{
                        return(
                            <GoodsLists
                                key={index}
                                index={index}
                                item={item}
                                countClick={countClick}
                            />
                        )
                    })
                }

                {
                    lists && lists.length==0&&(
                        <div className='zen_t-c'>
                            <p>暂无此分类下的商品</p>
                        </div>
                    )
                }
            </div>
            {
                lists && lists.length==0?
                    <div className="zen_h-50"/>:
                <div className={"footer-pagination"}>
                    <Pagination
                        ref={pageRef}
                        pageSize={20}
                        total={total}
                        // totalPage={totalPage}
                        current={pageNo}
                        onChange={page =>paginationChange(page)}
                    />
                </div>
            }

            <div style={{height:10}}/>
        </div>
    )

    function paginationChange(page) {
        updateState({
            pageNo:page
        })
    }



    function TabItem(props) {
        const {index,item}=props;
        return(
            <div
                onClick={()=>onClick(index)}
                className={`classfiy-item `}>
                <span className={choosed==index?`item-block item-block-bg${index+1}`:`item-block item-block-bg-normal`}></span>
                <span className={choosed==index? `zen_m-l-25 zen_m-r-25 item-color${index + 1}`:`zen_m-l-25 zen_m-r-25 zen_3C3C3C`}>{item}</span>
                <span className={choosed==index? `item-block item-block-bg${index+1}`:`item-block item-block-bg-normal`}></span>
            </div>
        )
    }
}